<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.yanshisan.cn" />
    <meta name="robots" content="all" />
    <title>程序猿小龙&博客</title>
    <link rel="stylesheet" href="../blog/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../blog/layui/css/layui.css" />
    <link rel="stylesheet" href="../blog/css/master.css" />
    <link rel="stylesheet" href="../blog/css/gloable.css" />
    <link rel="stylesheet" href="../blog/css/nprogress.css" />
    <link rel="stylesheet" href="../blog/css/message.css" />
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">CodeLong</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="/index">首页</a></li>
                        <li><a href="/article">博客</a></li>
                        <li><a href="/message">留言</a></li>
                        <li><a href="/diary">日志</a></li>
                    </ul>
                </nav>
                <div class="blog-user" id="wego" style="display: none">
                    <img style="width: 40px; height: 40px;padding:10px;" id="wechat-imgurl">
                </div>
                <div class="blog-user">
                    <i class="fa fa-wechat" id="wechat" ></i>
                </div>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
    <div class="container-inner">
        <section class="msg-remark">
            <h1>留言板</h1>
            <p>
                沟通交流，拉近你我！
            </p>
        </section>
        <div class="textarea-wrap message" id="textarea-wrap">
                <div>
                    <textarea id="remarkEditor" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
                <div style="margin: 12px 0px 5px 0px;">
                    <button class="layui-btn" id="btn">提交留言</button>
                </div>
        </div>
    </div>
    <div class="f-cb"></div>
    <div class="mt20">
        <ul class="message-list" id="message-list">
            <li class="zoomIn article" id="li-article">
            </li>
        </ul>
    </div>
</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <p class="mt05">
                        Copyright &copy; 2020 程序猿小龙
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="../blog/layui/layui.js"></script>
    <script src="../blog/js/yss/gloable.js"></script>
    <script src="../blog/js/plugins/nprogress.js"></script>
    <script src="../blog/js/yss/article.js"></script>
    <script th:inline="javascript">
        var zhi=[[${wximage}]];
        layui.use('layer', function(){
            var layer = layui.layer;
            var ok=document.getElementById("btn");
            var textarea=document.getElementById("remarkEditor");
            ok.onclick=function (ev) {
                if(textarea.value==""){
                    layer.msg('您还未输入内容！', {icon: 5});
                }
                else {
                    if(zhi==null){
                        layer.msg('请您先登录！', {icon: 5});
                    }
                    else {
                        var xhr = new XMLHttpRequest();
                        var str="/content?content="+textarea.value;
                        xhr.open("get",str);
                        xhr.send();
                        xhr.onreadystatechange = function(){
                            textarea.value="";
                            window.location.reload(true);
                        }
                    }
                }
            };
        });
        layui.use('jquery',function () {
            var $=layui.$;
            if([[${wximage}]]!=null){
                $("#wechat").hide();
                $("#wego").show();
                $("#wechat-imgurl").attr("src",[[${wximage}]]);
            }
            $("#wechat-imgurl").click(function () {
                $("#wechat-imgurl").hide();
                $("#wechat").show();
                $.get("/wechat/invalidate");
                zhi=null;
                // window.location.reload(true);
            });
            $("#wechat").click(function () {
                window.location.replace("/wechat/attestation");
            });
            $.get("/findmessage",function (data) {
                console.log(data.data);
                for(var i=0;i<data.data.length;i++){
                        var str="<div class=\"comment-parent\"><a name=\"remark-1\"></a><img src=\""+data.data[i].pwechat.imageurl+
                                "\" /><div class=\"info\"><span class=\"username\">"+data.data[i].pwechat.wxname+
                                "</div><div class=\"comment-content\">"+data.data[i].content+
                                "</div><p class=\"info info-footer\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i><span>"
                                +data.data[i].pwechat.province+data.data[i].pwechat.city+"</span> <span class=\"comment-time\">"
                                +data.data[i].date+"</p></div><hr />";
                        var link=$(str);
                        $("#li-article").append(link);
                }
            })
        })
    </script>
</body>
</html>
